import React from 'react';
import { View, Text, StyleSheet, Image,Dimensions } from 'react-native';
import { LazyLoadImage } from 'react-native-lazy-load-image';


// 这里假设你有合适的尺寸转换函数，将rem转换为对应的像素值，示例中简单用数字示意
const convertRemToPx = (rem) => rem * 16; // 简单假设1rem等于16px，实际需按项目配置调整

export default function ListItems({ name, time, symbol, price, img }) {
    // 根据符号字段判断要显示的文本和样式，使用View包裹来实现符号在上金额在下的布局
    const moneyText = symbol === '+' ? (
        <View style={styles.moneyTextContainer}>
            <Text style={[styles.symbolText, styles.income, { textAlign: 'right' }]}>+</Text>
            <Text style={[styles.amountText, styles.income]}>￥{price}</Text>
        </View>
    ) : symbol === '-' ? (
        <View style={styles.moneyTextContainer}>
            <Text style={[styles.symbolText, styles.expense, { textAlign: 'right' }]}>-</Text>
            <Text style={[styles.amountText, styles.expense]}>￥{price}</Text>
        </View>
    ) : null;
    return (
        <View style={styles.container}>
            <View style={styles.leftPart}>
                <LazyLoadImage
                    source={{ uri: img }}  // 修改此处，使用uri属性来指定网络图片地址
                    style={styles.image}
                />
            </View>
            <View style={styles.rightPart}>
                <View style={styles.textContainer}>
                    <Text style={{ fontWeight: 'bold', fontSize: convertRemToPx(1) }}>{name}</Text>
                    <Text style={{ fontSize: convertRemToPx(0.75), color: 'rgba(156,163,175,1)' }}>{time}</Text>
                    <Text style={{ fontSize: convertRemToPx(0.75), color: 'rgba(156,163,175,1)' }}>10:48</Text>
                </View>
                <View style={styles.moneyContainer}>
                    {moneyText}
                </View>
            </View>
        </View>
    );
}

const { width, height } = Dimensions.get('window');
const widthPx = 390;
const heightPx = 844;
const w = (value: number) => {
    return (value * width) / widthPx;
};
const h = (value: number) => {
    return (value * height) / heightPx;
};

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: h(4.13*16),
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: h(1),
    },
    leftPart: {
        marginLeft: w(0.5*16),
    },
    image: {
        width: convertRemToPx(3), // 假设图片直径为1rem，根据实际调整尺寸逻辑
        height: convertRemToPx(3),
        borderRadius: convertRemToPx(1.5), // 让图片成为圆形，半径为0.5rem
    },
    rightPart: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginLeft: w(1*16),
    },
    textContainer: {
        flexDirection: 'column',
    },
    moneyContainer: {
        width: w(2.94*16),
        height: h(1.31*16),
        flexDirection: 'row',
        justifyContent: 'flex-end',

        textAlign: 'right',
        fontFamily: 'PingFangSC-regular',
    },
    moneyTextContainer: {
        flexDirection: 'column',
        alignItems: 'flex-end', // 将内部元素靠右对齐
        justifyContent: 'center',
    },
    symbolText: {
        fontSize: convertRemToPx(1),
        lineHeight: h(1.31*16),
    },
    amountText: {
        fontSize: convertRemToPx(1),
        lineHeight: h(1.31*16),
    },
    income: {
        color: 'rgba(34,197,94,1)',
    },
    expense: {
        color: 'rgba(239,68,68,1)',
    },
});